<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .map{
            background: rgb(77, 74, 74);
            border: 2px solid #000;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="map">
        <div class="mapSon" style="background: red; width:40px;height:40px;position: absolute;"></div>
    </div>
</body>
</html>
<script>
    const map = document.querySelector('.map')
    const mapSon = document.querySelector('.mapSon')
    const mapSize = 40;
    const mapX = 10;
    const mapY = 10;

    map.style.width = mapSize * mapX + 'px';
    map.style.height = mapSize * mapY + 'px'


    let top1 = parseFloat(getComputedStyle(mapSon).top)
    let left1 = parseFloat(getComputedStyle(mapSon).left)
    let right1 = parseFloat(getComputedStyle(mapSon).right)
    let bottom1 = parseFloat(getComputedStyle(mapSon).bottom)
    console.log(top1,left1,right1,bottom1);

    document.addEventListener('keydown',e => {
        let top = parseFloat(getComputedStyle(mapSon).top)
        let left = parseFloat(getComputedStyle(mapSon).left)
        let right = parseFloat(getComputedStyle(mapSon).right)
        let bottom = parseFloat(getComputedStyle(mapSon).bottom)
        // console.log(top,e.keyCode);
        console.log(e.keyCode);
        switch (e.keyCode) {
            case 38:
                top -= 40
                bottom += 40
                mapSon.style.top = top + 'px'
                mapSon.style.bottom = bottom + 'px'
                break;
            case 37:
                left -= 40
                right += 40
                mapSon.style.left = left + 'px'
                mapSon.style.right = right + 'px'
                break;
            case 39:
                right -= 40
                left += 40
                mapSon.style.right = right + 'px'
                mapSon.style.left = left + 'px'
                break;
            case 40:
                bottom -= 40
                top += 40
                mapSon.style.bottom = bottom + 'px'
                mapSon.style.top = top + 'px'
                break;
        
            default:
                break;
        }
        if(top <= 0){
            top = 0
            bottom = 360
            mapSon.style.top = top + 'px'
            mapSon.style.bottom = bottom + 'px'
        }
        if(left <= 0){
            left = 0
            right = 360
            mapSon.style.left = left + 'px'
            mapSon.style.right = right + 'px'
        }
    })



</script>